<template>
  <!-- 内容 -->
  <div id="my_content">
    
    <!-- 主体结构 -->
    <div style="width: 1100px; margin: 0 auto">
      <!-- 首页导航栏 -->
      <div class="first_nav">
        <div style="font-size: 40px; font-weight: 500;color:#ff6767;">当当美食</div>
        <div>
          <ul
            style="
              display: flex;
              line-height: 55px;
              font-size: 25px;
              color: #333333;
            "
          >
            <li>首页</li>
            <li><router-link style="color: #333333;" to='/menu'> 菜谱</router-link></li>
            <li><router-link style="color: #333333;" to='/menu'> 食材</router-link></li>
            <li>珍选</li>
            <li>健康</li>
            <li>专题</li>
            <li>话题</li>
            <li>社区</li>
          </ul>
        </div>
        <div class="search">
          <input type="text" placeholder="输入查询的内容"  class="nav_input" v-model="input_search" @keydown="(e)=>{ if(e.keyCode==13){ search()} }" />
          <button type="button" @click="search">         
            <img src="../assets/img/search.png"/>
              <span>搜索</span>
           </button>   
        </div>
      </div>
      <!-- 轮播图 -->
        <el-carousel :interval="3000" arrow="never" height="468px">
          <el-carousel-item >
            <img src="../assets/img/banner.jpg"  alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img src="../assets/img/banner2.jpg" width="1200px" height="460px" alt="">           
          </el-carousel-item>
              <el-carousel-item >
          <img src="../assets/img/banner3.jpg" width="1200px" height="460px" alt="">
          </el-carousel-item>
        </el-carousel>
      <!-- 主页推荐详情 -->
      <div class="detail">
        <div>
          <h3 >最好吃的南瓜</h3>
          <h6>小美的菜单</h6>
          <p>
            南瓜的功效是非常高的，日常多吃南瓜可使大便通畅，肌肤丰美，尤其对女性，有美容作用哦～
          </p>
        </div>
        <div>
          <h3 >可口的西瓜汁</h3>
          <h6>小光的菜单</h6>
          <p>
           甜甜的西瓜汁，是夏天的必备之选，让你无惧夏天的炎热，更加的神清气爽，加油打工人们！
          </p>
        </div>
        <div>
          <h3 >香喷喷鸡腿饭</h3>
          <h6>然哥的菜单</h6>
          <p>
            果然，还是然哥对吃更懂哈，就没有然哥不懂的吃法，这是然哥的良心推荐，你值得拥有哦！
          </p>
        </div>
      </div>
      <!-- 美食分类推荐 -->
      <div class="recommendation">
              <div>
                <h2>
                  <div>甜品</div>
                  <div>恰是心中的甜</div>
                </h2>
                <hr width="310px" />
                <img src="../assets/img/footer2.jpg" width="310px" height="150px" />
                <ul type="circle">
                  <li>专题:酒后头痛，5种食物可缓解</li>
                  <li>降血压食物推荐，从日常开始改善</li>
                  <li>日常按摩这些部位，养生更养身</li>
                  <li>脑溢血原因，冬天要更注意</li>
                  <li>孩子体质差总生病，父母该怎么办？</li>
                  <li>专题:快手早餐，营养满分の三明治</li>
                </ul>
              </div>
        <div>
          <h2>
            <div>味增汤</div>
            <div>温暖心的美食</div>
          </h2>
          <hr width="310px" />
          <img src="../assets/img/footer1.jpg" width="310px" height="150px" />
          <ul>
            <li>尽享天下美食，体味百味生活！</li>
            <li>三味酥鱼，好吃别客气！</li>
            <li>吃遍山珍海味，不如三味酥鱼！</li>
            <li>原汁原味原生态，经典盛香人人爱</li>
            <li>天天盛肉香，健康好享受</li>
            <li>健康盛香，经典芬芳!</li>
          </ul>
        </div>
        <div>
          <h2>
            <div>蛋包饭</div>
            <div>蛋中包含着饭</div>
          </h2>
          <hr width="310px" />
          <img src="../assets/img/footer3.jpg" width="310px" height="150px" />
          <ul>
            <li>走遍金华山水，吃遍金华美食!</li>
            <li>真情广发，美味实惠!</li>
            <li>因美食而快乐！</li>
            <li>大家都要来，天下都香鲜!</li>
            <li>一朝品尝，终身难忘-乐易餐厅!</li>
            <li>相伴的时光重是短暂不堪!</li>
          </ul>
        </div>
      </div>
      <!-- 新菜推荐 -->
      <div class="new_products">
        <ul>
          <li><h3 style="color: #ff6767; font-size: 20px">新秀菜谱</h3></li>
          <li>一周热门</li>
          <li>最受欢迎的家常菜</li>
          <li>特色佳肴</li>
          <li style="margin-left: auto">VIP推荐</li>
        </ul>
        <div>
            <el-card :body-style="{ padding: '0px' }" v-for="(item,index) in list" :key="index">
              <img :src="item.pic" class="image">
              <div style="padding: 14px;">
                <span>{{item.name}}</span>
                <div class="bottom clearfix">                 
                  <el-button type="text" class="button">查看详情</el-button>
                </div>
              </div>
            </el-card>

 
        </div>
      </div>
      <!-- 话题区 -->
      <div class="conversation">
        <div>
          <h3>&nbsp;热门话题</h3>
          <h4>精品话题</h4>
          <h4 style="margin-left: auto">全部话题</h4>
        </div>
        <div>
          <div>
            <div></div>
            <p></p>
            <span></span>
          </div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- 通告区 -->
      <div class="comment">
        <img
          src="../assets/img/left.jpg"
          style="
            position: absolute;
            left: 20px;
            top: 10px;
            width: 200px;
            height: 200px;
          "
        />
        <img
          src="../assets/img/right.jpg"
          style="
            position: absolute;
            right: 20px;
            top: 10px;
            width: 200px;
            height: 200px;
          "
        />
        <h3>天天吃美食，让人人都可以，享受到不一样，不重样的美食！</h3>
        <p>
          关于我们 · 联系我们 · 加入我们 · 服务声明 · 友情链接 · 网站地图 ·
          移动应用
        </p>
        <p>
          友情链接：愉悦妈妈自游乐爱奇艺生活中华美食网太平洋亲子网美食杰红餐网妈妈网亲宝网
        </p>
        <p>
          版权所有 © 2004-2020当当美食街 保留所有权利 - 京公网安备
          11010502031041号 / 京ICP证090244号 / 京ICP备10020153号
        </p>
      </div>
    </div>
  </div>
</template>

<script>
   var url='';// eslint-disable-line no-unused-vars
    export default {
      data(){
        return {
          input_search:"",
          list:[],
          num:12,
          chuan:301
        }
      },
      methods:{
        // 搜索功能
          search(){
            if( this.input_search.trim()!=""){
            this.$request.get(`/search?keyword=${this.input_search}&num=10&appkey=1121b1761b010916`).then(req=>{
            // 进行判断
              if(req.data.msg!="ok"){
                    this.$message({
                      showClose: true,
                      message: '没有找到相关信息！',
                      type: 'warning'
                    });
              }else{
                  this.$router.push('/search?id='+this.input_search)
              }    
          })
          }
        },
        //获取所有列表
          axios() {
            // var url = `/byclass?classid=${this.chuan}&start=0&num=${this.num}&appkey=1121b1761b010916`;
            var url = `/byclass?classid=${this.chuan}&start=0&num=${this.num}&appkey=1121b1761b010916`;
            this.$request.get(url).then((res) => {
              this.list = res.data.result.list;
            });
          },
      },
      mounted(){
         this.axios();
      }


};
</script>

<style  scoped>
    .nav_input::placeholder{
      font-size: 14px;
      color: rgba(0, 0, 0, 0.5);
    }
    .nav_input{
      padding-left: 3px;
      height: 30px;
      box-sizing: border-box;
      outline: none;
      border-top-right-radius:0px ;
      border-bottom-right-radius:0px ;
      border-right:0;
    }
    .search{
      display: flex;
    }
    .search>button{
      padding: 3px 8px;
      height: 30px;
      outline: 0;
      box-sizing: border-box;
      background: #d37373;
      border-top-left-radius:0px ;
      border-bottom-left-radius:0px ; 
      position: relative;
      display: flex;
      align-items: center;
    }
    .search>button>img{
      top: 10px;
      width: 20px;
      height: 20px;
    }
    .search>button>span{
      color: rgba(255, 255, 255, 0.89);
      top: 10px;
    }
    .search>button>span:hover{
       color: rgba(255, 255, 255, 0.89);
    }
    .search>button:hover{
      background: #82b6e7;
    }
</style>


